<template>
  <el-pagination
    style="text-align: right"
    background
    :page-sizes="[10, 20, 30, 50]"
    :current-page="pageNum"
    :page-size="pageSize"
    :total="total"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
  </el-pagination>
</template>

<script>
export default {
  props: {
    pages: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      pageSize: this.pages.pageSize,
      pageNum: this.pages.pageNum,
      total: this.pages.total,
    };
  },
  // 实时更新pages
  watch: {
    pages: {
      handler(val) {
        this.pageSize = val.pageSize;
        this.pageNum = val.pageNum;
        this.total = val.total;
      },
      deep: true,
    },
  },
  methods: {
    // 修改每页数量
    handleSizeChange(val) {
      const params = {
        pageSize: val,
        pageNum: this.pages.pageNum,
        total: this.pages.total,
      };
      this.$emit("SetPagination", params);
    },
    // 修改当前页
    handleCurrentChange(val) {
      const params = {
        pageSize: this.pages.pageSize,
        pageNum: val,
        total: this.pages.total,
      };
      this.$emit("SetPagination", params);
    },
  },
};
</script>

<style lang="less" scoped>
.el-pagination {
  text-align: right;
}
</style>
